import { useState, useEffect } from 'react';
import { AntDesign } from '@expo/vector-icons';
import { FlatList, StyleSheet, TouchableOpacity, Text, View,ImageBackground} from 'react-native';
import { useAuth } from '../context/AuthProvider';

const ChooseAddress = ({ navigation,route }) => {
    const {user} = useAuth()
    const [page, setPage] = useState(1);
    const [list, setList] = useState([]);
    const [refreshing, setRefreshing] = useState(false);
    const shopId = route.params.id
    const shopState = route.params.state
    useEffect((addressId) => {
        fetch('http://10.7.89.96:3000/DeliveryAddress',{
                method: 'POST',
                body:JSON.stringify({
                    addressId:addressId,
                    userName:user.userName
                })
            })
            .then(res => res.json())
            .then(res => {
                setRefreshing(false)
                if (page == 1) {
                    setList(res.List)
                }
                else {
                    setList([...list, ...res.data.content])
                }
            })
            navigation.setOptions({
                headerLeft: () => (
                    <View style={{ width: 100 }}>
                        <Text onPress={() => Center()}>
                            <AntDesign
                                name='arrowleft'
                                size={25}
                                color="black"
                            />
                        </Text>
                    </View>
                ),
            })
    }, [page])
    const choose = (addressId) => {
        navigation.navigate('Pay',{addressId:addressId,id:shopId,state:shopState})
        console.log(shopId);
        console.log("state");                                                                                                                                              
        console.log(shopState);
    }
    const onEnd = () => {
        setPage(page + 1)
    }
    const onRefresh = () => {
        setRefreshing(true);
        setPage(1);
    }
    const onAddAddress = () => {
        navigation.navigate('AddAddress')
    }
    const renderItem = ({ item }) => (
        <View>
            <View style={styles.djx1}>
                <TouchableOpacity style={styles.ChooseBtn} >
                    <Text style={styles.uploadText} onPress={()=>choose(item.addressId)}>选择</Text>
                </TouchableOpacity>
                <View style={{ marginLeft: "26%", marginTop: "-14%" }}>
                    <Text style={{ marginTop: "3%" }}>收货人：{item.addressName}</Text>
                    <Text style={{ marginTop: "-7.5%", marginLeft: "45%" }}>电话号码：{item.phoneNum}</Text>
                    <Text style={{ marginTop: "6%" }}>具体地址：{item.park}园区{item.building}号楼</Text>
                </View>
                
            </View>
        </View>
    )
    const Center = () => {
        navigation.navigate('Pay')
    }
    return (
        <View style={{flex:1}}>
            <ImageBackground source={require('../img/bgimg.jpg')} style={styles.bgimg}>
            <View style={styles.djx2}>
                <Text style={{ marginLeft: 120, marginTop: 12 }} onPress={() => onAddAddress()}>
                    <AntDesign
                        name='pluscircleo'
                        size={25}
                    />
                </Text>
                <Text style={{ marginTop: -23, marginLeft: 160 }} onPress={() => onAddAddress()}>
                    添加收货地址
                </Text>
            </View>
            <View>
                <FlatList
                    ListEmptyComponent={<Text>暂无数据</Text>}
                    onRefresh={onRefresh}
                    refreshing={refreshing}
                    data={list}
                    renderItem={renderItem}
                    onEndReached={onEnd}
                    keyExtractor={item => item.id}
                />
            </View>
            </ImageBackground>


        </View>
    );
}

const styles = StyleSheet.create({
    bgimg: {
        flex: 1,
        resizeMode: "cover",
    },
    djx1: {
        width: "90%",
        height: 120,
        borderColor: "grey",
        borderWidth: 1,
        marginLeft: "5%",
        marginTop: 20
    },
    djx2: {
        width: "90%",
        height: 50,
        marginLeft: "5%",
        marginTop: 30,
        borderColor: "grey",
        borderWidth: 1,
        backgroundColor: "grey"
    },
    ChooseBtn:{
        marginLeft: '4%',
        marginTop:'12%',
        height: 35,
        width: 60,
        justifyContent: 'center',

    },
    uploadText: {
        textAlign: 'center',
        color: 'white',
        textAlignVertical: 'center',
        borderColor:'#cacaca' ,
        fontSize:15,
        height: 30,
        borderRadius: 15,
        backgroundColor:'orange'
      },
});

export default ChooseAddress